<!-- 房源列表 -->
<template>
	<div class="app-container">
		<div class="left-search">
		   <div class="flex"
		        style="margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid #eee;padding-left: 10px;">
		        <el-input style="width: 150px" clearable placeholder="请输入房号" v-model="formInline.room_number" size="mini" @change="getData()" />
		        <el-button type="primary" @click="getData()" style="margin-left: 10px;" size="mini">查询
		        </el-button>
		    </div>
			<el-tree :data="WuYeHouseStructure" :render-after-expand="true" :highlight-current="true" node-key="id"
				:expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick">
				<div class="custom-tree-node" style="width: 100%;" slot-scope="{ node, data }">
					<div class="flex-between" style="width: 100%;">
						<span style="font-size: 14px;">{{node.label }}</span>
						<!-- <span>
							<i v-if="data.level!=1" class="el-icon-edit-outline" style="color: #1890ff;"
								@click.stop="() => editClassDatas(node, data)"></i>
							<i v-if="data.level!=1" class="el-icon-delete" style="color: red;"
								@click.stop="() => organizationDel(node, data)"></i>
							<i class="el-icon-circle-plus-outline" style="color: green;"
								@click.stop="() => append(node, data)"></i>
						</span> -->
					</div>
				</div>
			</el-tree>
		  
		</div>
		<div class="wx-user-box">
			<div class="app-title">房源列表</div>
		<!-- 	<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="小区名称"><el-input v-model="formInline.name" clearable placeholder="请输入小区名称查询" @change="sousuo()"></el-input></el-form-item>
				<el-form-item label="物业公司">
					<el-select v-model="formInline.wuye_id" placeholder="请选择" clearable @change="sousuo()">
						<el-option :label="item.wy_name" :value="item.id" v-for="(item, index) in wuyeList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询/筛选</el-button></el-form-item>
			</el-form> -->

			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="address" label="房源地址"></el-table-column>
				<el-table-column prop="room_number" label="房号"></el-table-column>
				<el-table-column prop="xq_name" label="小区名称"></el-table-column>
				<el-table-column prop="wy_name" label="物业公司"></el-table-column>
				<el-table-column prop="area" width="100px" label="面积"></el-table-column>
				<el-table-column label="户型">
					<template slot-scope="scope">{{scope.row.room}}室 {{scope.row.hall}}厅 {{scope.row.toilet}}卫
					    {{scope.row.balcony}}阳台
					    {{scope.row.kitchen}}厨房</template>
				</el-table-column>
				<el-table-column prop="check_in_time" label="入住日期">
					<template slot-scope="scope">
						{{strJq(scope.row.check_in_time)}}
					</template>
				</el-table-column>
				<el-table-column prop="rel_user_num" width="100px" label="居住人数"></el-table-column>
				<el-table-column prop="address" label="认证状态" width="100px">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.certificationStatus" type="success" effect="plain">已认证</el-tag>
						<el-tag v-else type="danger" effect="plain">未认证</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="100px">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="openInfo(scope.row)">详情</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<div class="el-pagination">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10, 100, 200, 300, 400]"
					:page-size="size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>

		<el-dialog :title="'小区名称：' +item.xq_name " :visible.sync="dialogVisible" width="800px">
			<el-table :data="houseDatas" style="width: 100%" border>
				<el-table-column prop="level_name" label="属性" ></el-table-column>
				<el-table-column prop="name" label="内容"></el-table-column>
				<el-table-column prop="level" label="级别"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
import Api from '@/api/pages/wuye/fy.js';
import wuyeApi from '@/api/pages/wuye/wuye.js';
export default {
	name: 'wuye-fy-list',
	data() {
		return {
			defaultProps: {
			    children: 'children',
			    label: 'name'
			},
			dialogVisible:false,
			formInline: {
				room_number:'',
				org_id:'',
				name: '',
				wuye_id: '',
				start_time: '',
				end_time: ''
			},
			form: {},
			page: 1,
			size: 10,
			total: 0,
			date: [],
			tableData: [],
			wuyeList: [],
			houseDatas:[],
			item:'',
			userType: {
				'1': '超级管理员',
				'2': '普通管理员'
			},
			WuYeHouseStructure:[]
		};
	},
	mounted() {
		this.getData();
		this.getWuyeList();
		this.loadWuYeHouseStructure();
	},
	methods: {
		
		getData() {
			let data = {
				pageNumber: this.page,
				pageSize: this.size
			};
			if (this.formInline.name) {
				data['xq_name'] = this.formInline.name.trim();
			}
			if (this.formInline.wuye_id) {
				data['wuye_id'] = this.formInline.wuye_id;
			}
			if (this.formInline.org_id) {
				data['org_id'] = this.formInline.org_id;
			}
			if (this.formInline.room_number) {
				data['room_number'] = this.formInline.room_number;
			}
			if (this.date && this.date.length) {
				data['start_time'] = this.date[0];
				data['end_time'] = this.date[1];
			}
			Api.query(data).then(res => {
				if (res.state) {
					this.tableData = res.data.list;
					this.total = res.data.totalRow;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 修改搜索状态
		upallow(id) {
			Api.upallow({
				xiaoqu_id: id
			}).then(res => {
				if (res.state) {
					this.$message({
						message: res.msg,
						type: 'success'
					});
				} else {
					this.$message(res.msg);
				}
				this.getData();
			});
		},
		// 获取物业公司
		getWuyeList() {
			wuyeApi.getWuyeList().then(res => {
				if (res.state) {
					this.wuyeList = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		loadWuYeHouseStructure() {
			Api.loadWuYeHouseStructure().then(res => {
				if (res.state) {
					res.data.forEach(item => {
						item.name = item.wy_name;
					})
					this.WuYeHouseStructure = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 打开修改搜索状态询问
		openShitch(id) {
			this.$confirm('您确定对当前搜索状态进行修改吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.upallow(id);
				})
				.catch(() => {});
		},
		sousuo() {
			this.page = 1;
			this.getData();
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val;
			this.getData();
		},
		openInfo(item) {
			this.item = item;
			this.houseDatas = item.houseDatas
			this.dialogVisible = true;
		},
		// 字符串截取
		strJq(str) {
			if(str) {
				return str.substring(0,10)
			}
		},
		handleNodeClick(data, node, arr) {
		    // console.log(data, node, arr);
			if(data.wy_name) {
				this.formInline.wuye_id = data.id;
				this.formInline.org_id = '';
			}else{
				this.formInline.wuye_id = data.wuye_id;
				this.formInline.org_id = data.id;
			}
		    this.getData();
		},
	}
};
</script>
<style lang="scss" scoped>
	.app-container{
		display: flex;
	}
	.left-search {
	    width: 220px;
	    margin-right: 10px;
	    min-height: 80vh;
	    background: #fff;
	    flex-shrink: 0;
	    padding: 10px 0;
	    padding-right: 10px;
	    overflow: auto;
	    max-height: 80vh;
	}
	.wx-user-box{
		flex: 1;
	}
	#myvideo {
	    width: 100%;
	    height: 54vh;
	    object-fit: fill;
	    pointer-events: none;
	}
	
	#myvideo::-webkit-media-controls-enclosure {
	    display: none;
	}
</style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
